<template>
    <div>
        <button @click="handleBack">返回</button>
        列表详情页
        <h2>猜你喜欢</h2>
        <ul>
            <li @click="handleClick">电影1</li>
        </ul>
    </div>
</template>
<script setup>
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { onBeforeMount, onBeforeUnmount, onMounted } from "vue"
import useTabbarStore from '../store/tabbarStore'
const store = useTabbarStore()
const route = useRoute()
const router = useRouter()

const handleBack = () => {
    router.back();
}
const handleClick = () => {
    router.push(`/detail/6789`)
}
onBeforeMount(() => {
    //修改参数 方式一: 直接修改
    // store.isTabbarShow = false
    // 方式二 补丁修改$patch
    // store.$patch({
    //     isTabbarShow: false
    // })
    store.change(false)
})
onMounted(() => {
    // console.log('接收参数', route.params.myid);
})
onBeforeUnmount(() => {

    // store.isTabbarShow = true

    //重置为默认值
    // store.$reset()
    store.change(true)

})
onBeforeRouteUpdate(() => {
    console.log('当前路由改变时调用', route.params.myid,route.params.myid);
})
</script>

